<template>
  <a-card class="general-card" :title="props.title">
    <a-grid :cols="24" :col-gap="24" :row-gap="24">
      <a-grid-item :span="8" v-for="(item, idx) in props.renderData">
        <a-card>
          <div class="flex">
            <a-statistic
              :title="item.title"
              :value="item.count"
              show-group-separator
              :value-from="0"
              animation
            >
              <template #prefix>
                <span
                  class="statistic-prefix"
                  :style="{
                    background:
                      idx == 0 ? '#FFE4BA' : idx == 1 ? '#E8FFFB' : '#E8F3FF',
                  }"
                >
                  <component
                    :is="
                      idx == 0
                        ? 'icon-common'
                        : idx == 1
                        ? 'icon-common'
                        : 'icon-common'
                    "
                    :style="{
                      color:
                        idx == 0 ? '#F77234' : idx == 1 ? '#33D1C9' : '#165DFF',
                    }"
                  />
                </span>
              </template>
            </a-statistic>
          </div>
        </a-card>
      </a-grid-item>
    </a-grid>
  </a-card>
</template>

<script lang="ts" setup>
  interface Data {
    title: string;
    count: any;
    prefix: {
      icon: string;
      background: string;
      iconColor: string;
    };
  }
  const props = defineProps<{
    renderData: Data[];
    title: string;
  }>();
  console.log(
    '🚀 ~ file: data-overview.vue:43 ~ renderData:',
    props.renderData
  );
</script>

<style scoped lang="less">
  :deep(.arco-statistic) {
    width: 100%;
    .arco-statistic-title {
      color: rgb(var(--gray-10));
      font-weight: bold;
    }
    .arco-statistic-content {
      display: flex;
      width: 100%;
      flex: 1;
    }
    .arco-statistic-value {
      display: flex;
      margin: auto;
      span {
        margin: auto auto auto 20px;
      }
    }
  }
  .statistic-prefix {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    color: var(--color-white);
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
  }
</style>
